<template>
    <div class="wdiget-container">
        <a-collapse v-model:activeKey="state.activeKey" accordion :bordered="false" style="background-color: transparent;">
            <a-collapse-panel key="1" header="基础控件">
                <draggable
                    :list="baseWidgets"
                    tag="ul"
                    ghost-class="ghost" 
                    item-key="key"
                    animation="300"
                    :group="{name: 'dragGroup', pull: 'clone', put: false}"
                    :sort="false"
                    :clone='handleWidgetClone'
                >
                    <template #item="{element}">
                        <li class="widget-item flex items-center cursor-pointer justify-between">
                            <span>{{ element.options.label }}</span>
                            <Icon :icon="element.icon" class="mr-2"/>
                        </li>
                    </template>
                </draggable>
            </a-collapse-panel>
        </a-collapse>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import draggable from 'vuedraggable'
import { baseWidgets } from '@/xyFDesigner/config';
import Icon from '@/components/Iconify/index.vue'
import { cloneDeep } from 'lodash';
import { getUUID } from '@/utils';
import type { BaseWidgetType } from '@/xyFDesigner/type';
import { fetchCompModule, initWidget } from '@/utils/component';


const state = reactive({
    activeKey:"1"
})

const widgetModules:Record<string,{default:string}> = import.meta.glob('../../widgets/**',{eager:true})

const handleWidgetClone = (widget:BaseWidgetType)=>{
    const clonedWidget = cloneDeep(widget)
    clonedWidget.id = `xy_${getUUID()}`
    return clonedWidget 
}


const initComp = ()=>{
    for (const widget of baseWidgets) {
        const type = 'xy-' + widget.type
        const module = fetchCompModule(type,widgetModules) as string
        initWidget(type,module)
    }
}
defineExpose({
    initComp
})
</script>

<style lang='scss' scoped>
.wdiget-container{
    height: calc(100vh - 80px) ;
    background-color: #fff;
    user-select: none;
    border-radius: 5px;
        overflow: hidden;
        overflow-y: auto;
        scrollbar-gutter: stable;
        &::-webkit-scrollbar {
            width: 6px;
            background: transparent;
            opacity: 0;
            transition: opacity 0.3s;
        }

        &:hover::-webkit-scrollbar {
            opacity: 1;
        }

        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-thumb,
        &::-webkit-scrollbar-track {
            border-radius: 4px;
        }

        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-track {
            background-color: transparent;
        }

        &::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        &:hover::-webkit-scrollbar-thumb {
            background-color: #a19e9e;

            &:hover {
                background-color: #ccc;
            }
        }

    ul {
        display: flex;
        flex-wrap: wrap;
        flex-shrink: 0;
        justify-content: space-between;
        li {
            width: 48%;
            background-color: #fff;
            margin: 2px;
            border-radius: 5px;
            padding: 5px;
            border:1px solid #e8e8e8;
            transition: all .3s;
            &:hover{
                border-color: rgb(51, 112, 255);
            }
        }
    }
}
</style>